<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="vtc" uri="/vtc-core-tags"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@ include file="/common/meta.jsp"%>
<title>VTC - Holistic category - HPP</title>
<%@ include file="/common/css_js.jsp"%>
<script type="text/javascript">
function selectCard(card){
	var nodeId = document.getElementById("categoryNodeId").value;
	var type = document.getElementById("categoryNodeType").value;
	var categoryId = document.getElementById("categoryId").value;
	var treeType = document.getElementById("treeType").value;
	if(nodeId==null || nodeId==""){
		document.getElementById("errorMessage").innerHTML="Please fill in Category Node Info first!";
		return;
	}
	if(card=='node_card'){
		if(type=="Root")
			window.top.catForm.location="categoryNode!list.action?no-decorate=0&categoryNodeId="+nodeId+"&categoryNodeType="+type+"&categoryId="+categoryId+"&treeType="+treeType;
		else if(type=="Branch")
			window.top.catForm.location="categoryBranch!list.action?no-decorate=0&categoryNodeId="+nodeId+"&categoryNodeType="+type+"&categoryId="+categoryId+"&treeType="+treeType;
		else
			window.top.catForm.location="categoryLeaf!list.action?no-decorate=0&categoryNodeId="+nodeId+"&categoryNodeType="+type+"&categoryId="+categoryId+"&treeType="+treeType;
	}else if(card=='att_card'){
		window.top.catForm.location="categoryProgrammeAttribute!list.action?no-decorate=0&categoryNodeId="+nodeId+"&categoryNodeType="+type+"&categoryId="+categoryId+"&treeType="+treeType;
	}else if(card=='owner_card'){
		window.top.catForm.location="categoryOwner!list.action?no-decorate=0&categoryNodeId="+nodeId+"&categoryNodeType="+type+"&categoryId="+categoryId+"&treeType="+treeType;
	}else if(card=='planner_card'){
		window.top.catForm.location="categoryPlanner!list.action?no-decorate=0&categoryNodeId="+nodeId+"&categoryNodeType="+type+"&categoryId="+categoryId+"&treeType="+treeType;
	}
}
function saveOwner() {
	$("#categoryOwnerForm").attr('action',
			'categoryOwner!save.action?no-decorate=0')
	$("#categoryOwnerForm").submit();
}
function selectAllAttributes(){
	var cb=$("#allAttributes");
	if(cb.attr("checked")==true){
		var cbRoleCodes=document.getElementsByName("attListSelected")
		for(i=0;i<cbRoleCodes.length;i++){
			cbRoleCodes[i].checked=true;
		}
	}else{
		var cbRoleCodes=document.getElementsByName("attListSelected")
		for(i=0;i<cbRoleCodes.length;i++){
			cbRoleCodes[i].checked=false;
		}
	}
}
function deleteAttr(){
	var hasAttribute = false;
	var cbRoleCodes=document.getElementsByName("attListSelected")
	for(i=0;i<cbRoleCodes.length;i++){
		if(cbRoleCodes[i].checked==true){
			hasAttribute = true;
			break;
		}
	}
	if(!hasAttribute){
		if(confirm("Please select one Programme Attribute at least.")){
			return false;
		}
	}else{
		$("#categoryAttForm").attr('action', 'categoryProgrammeAttribute!delete.action?no-decorate=0');
		$("#categoryAttForm").submit();
	}
}

function editAttribute(e,id){
	
	parent.popup(e, "categoryProgrammeAttribute!loadAddAttributePage.action?no-decorate=0&categoryNodeId=<s:property value='categoryNodeId'/>&categoryNodeType=<s:property value='categoryNodeType'/>&categoryId=<s:property value='categoryId'/>&treeType=<s:property value='treeType'/>&attribute.id="+id, "width:600;height:300"); 
}

function getDesc(code,value,index){
	$.ajax({
		url : "categoryProgrammeAttribute!getAttributeLabel.action?attrValue="+ value+"&attrCode="+code,
		cache : true,
		dataType : "json",
		async : false,
		success : function(data) {
					document.getElementById("code_"+index).innerHTML=data.code;
					document.getElementById("value_"+index).innerHTML=data.value;
		},
		error : function(data) {
			//alert(data);
		}
	});
}
</script>
<body>
	<div class="bodyBlank">
		<div class="wTab">
			<table id="wMu" border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td class="item1" id="itemA"><a
						href="javascript:selectCard('node_card');">Category Info.</a></td>
					<s:if test="%{categoryNodeType=='Leaf'}">
						<td class="item1" id="itemB"><a
							href="javascript:selectCard('att_card');">Programme Groups</a></td>
					</s:if>
					<s:if test="%{treeType=='Root'}">
						<td class="item1" id="itemC"><a
							href="javascript:selectCard('owner_card');">Owner</a>
						</td>
					</s:if>
					<s:if test="%{treeType!='Root'}">
						<td class="item1" id="itemD"><a
							href="javascript:selectCard('planner_card');">Planner</a></td>
					</s:if>
				</tr>
			</table>
		</div>
		<script>
			selectTab("wMu", "itemB");
		</script>
		<div class="sListBorder">
		
		<table width="100%" class="sTable" cellpadding="0" cellspacing="0"
						border="0"><tr>
						<td align="right">
						<div class="button">
							<div class="left">
								<div class="right">
									<input class="inputButton" type="button" id="" name=""
										value="Show Programme List"
										onclick="window.top.popup(event, 'categoryProgrammeAttribute!getResultSet.action?no-decorate=0&categoryNodeId=<s:property value='categoryNodeId'/>&categoryNodeType=<s:property value='categoryNodeType'/>&categoryId=<s:property value='categoryId'/>', 'width:800;height:600'); " />
								</div>
							</div>
						</div>
						</td>
						</tr></table>
		<label class="noteBlue"> Same Programme Attribute will use "Or" relationship while different Programme Attributes will use "And" relationship.
</label>
			<div class="sList">
				<s:form name="categoryAttForm" id="categoryAttForm" method="post">
					<s:hidden name="categoryNodeId" id="categoryNodeId"
						value="%{categoryNodeId}"></s:hidden>
					<s:hidden name="categoryNodeType" id="categoryNodeType"
						value="%{categoryNodeType}" />
					<s:hidden name="treeType" id="treeType" value="%{treeType}"/>
					<s:hidden id="categoryId" name="categoryId"
					value="%{categoryId}"></s:hidden>
					<table width="100%" class="sTable" cellpadding="0" cellspacing="0"
						border="0">
						
						<tr>
							<td class="sTh checkbox"><input class="inputCheckbox"
								type="checkbox" id="allAttributes" name="allAttributes"
								onclick="selectAllAttributes()" />
							</td>
							<td class="sTh">Selected Programme By Attributes</td>
							<td class="sTh">Attribute Value</td>
						</tr>

						<s:iterator value="attList" var="att" status="status">
							<tr class="sRow2">
							
							<s:if test="%{#att.programmeAttribute =='FUNDING_SOURCE'}">
								<td class="sCell"><s:checkbox name="attListSelected"
										value="0" fieldValue="%{#att.id}" disabled="true"></s:checkbox>
								</td>
								
								<td class="sCell" >
								<label id="code_<s:property value='#status.index' />" ></label>
								</td>
							</s:if>
							<s:else>
								<td class="sCell"><s:checkbox name="attListSelected"
										value="0" fieldValue="%{#att.id}"></s:checkbox>
								</td>
								
								<td class="sCell" >
								<a href="#" id="code_<s:property value='#status.index' />" onclick="editAttribute(event,'<s:property value='#att.id' />')">
								</a>
								</td>
							</s:else>
								
								<td class="sCell" id="value_<s:property value='#status.index' />"></td>
			<script>
					getDesc("<s:property value='#att.programmeAttribute' />","<s:property value='#att.value'/>","<s:property value='#status.index' />");
				</script> 
								
							</tr>
						</s:iterator>
					</table>
				</s:form>
			  </div>
			  <security:authorize  access="hasAnyRole('PLANNING_EXERCISE_INSERT','PLANNING_EXERCISE_UPDATE')">
			  <div class="btnSet btnSetTypeA">
					<div class="left">
						<div class="button">
							<div class="left">
								<div class="right">
									<input class="inputButton" type="button" id="" name=""
										value="Add"
										onclick="parent.popup(event, 'categoryProgrammeAttribute!loadAddAttributePage.action?no-decorate=0&categoryNodeId=<s:property value='categoryNodeId'/>&categoryNodeType=<s:property value='categoryNodeType'/>&categoryId=<s:property value='categoryId'/>&treeType=<s:property value='treeType'/>', 'width:600;height:300'); " />
								</div>
							</div>
						</div>
						<div class="button">
							<div class="left">
								<div class="right">
									<input class="inputButton" type="button" id="" name=""
										value="Delete" onclick="deleteAttr()" />
								</div>
							</div>
						</div>
						
					</div>
			</div>	
			</security:authorize>		  
		</div>

<script>
function checkLevel1Endorsed(){
	var type = document.getElementById("categoryNodeType").value;
	var categoryId = document.getElementById("categoryId").value;
	$.ajax({
		url : "category!checkLevel1Endorsed.action?no-decorate=0&categoryId="+categoryId,
		cache : true,
		dataType : "text",
		async : false,
		success : function(data) {
			if(data=="true"){
				if(type="Root"){
					$("input[type='button']").attr("disabled", "true");
				}
			}
		},
		error : function(data) {
		}
	});
}
checkLevel1Endorsed();
</script>

		<iframe id="phraseOutIframe" frameborder="0" scrolling="no" marginwidth="0" width="100%" src="selectedPhraseOut!list.action?no-decorate&categoryNodeId=<s:property value='categoryNodeId'/>&categoryId=<s:property value='categoryId'/>&categoryNodeType=<s:property value='categoryNodeType'/>" />	
		
	</div>
</body>